// 公共表单组件
<template>
  <div>
    <el-form ref="formModel" :model="formModel" label-width="10px" size="small"
             :label-position="plus.position?plus.position:'right'">

      <el-row v-for="row in config" :key="row.id">

        <div v-for="item in row.items" :key="item.id" class="container">

          <!-- 输入框 -->
          <template v-if="item.type == 'input'">
            <el-col v-if="item.props.position == 'right'" :span="item.span"
                    :style="[{marginLeft: `${400}px`},{marginTop:`${-45}px`}]">
              <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
                <el-input
                  :style="[{width: `${item.props.width}px`},{marginLeft: `${10}px`}]"
                  :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                  :placeholder="item.props.placeholder"
                  v-model="formModel[item.model]"/>
              </el-form-item>
            </el-col>

            <el-col v-else :span="item.span">
              <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
                <div v-if="!item.intel">
                  <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="formModel[item.model]"
                    :fetch-suggestions="querySearch"
                    :style="[{width: `${item.props.width}px`},{marginLeft: `${item.props.left?item.props.left:55}px`}]"
                    :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                    :placeholder="item.props.placeholder"
                    @focus="focusIntel(item.model)">
                    <svg-icon icon-class="zhi" slot="suffix" class="my-icon"/>
                    <template slot-scope="{ item }">

                      <div class="value">
                        {{ item.value }}

                        <el-popover
                          placement="top-start"
                          title="文档内容"
                          width="500"
                          trigger="hover">
                          <div class="popover-txt">
                            <div v-html="highlightText(txt)"></div>
                          </div>
                          <svg-icon slot="reference" icon-class="look" class="my-icon2"/>
                          <!-- <el-button slot="reference">hover 激活</el-button> -->
                        </el-popover>
                      </div>
                      <span class="info">{{ item.info }}</span>
                    </template>
                  </el-autocomplete>
                </div>
                <el-input
                  v-else
                  class="suit input"
                  :style="[{width: `${item.props.width}px`},{marginLeft: `${item.props.left?item.props.left:55}px`}]"
                  :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                  :placeholder="item.props.placeholder"
                  v-model="formModel[item.model]"/>
              </el-form-item>
            </el-col>

          </template>


          <!-- 文本框 -->
          <el-col v-else-if="item.type == 'text'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
              <el-input
                class="suit-text"
                type="textarea"
                :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                :rows="item.props.rows"
                :placeholder="item.props.placeholder"
                v-model="formModel[item.model]">
              </el-input>
            </el-form-item>
          </el-col>

          <!-- select框 -->
          <el-col v-else-if="item.type == 'select'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`" class="suit-select">
              <el-select
                class="suit"
                :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                v-model="formModel[item.model]"
                :placeholder="item.props.placeholder">
                <el-option
                  v-for="i in item.props.options"
                  :key="i.value"
                  :label="i.label"
                  :value="i.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 图片上传 -->
          <el-col v-else-if="item.type == 'img'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
              <div class="suit-upload">
                <div class="my-upload">
                  <img src="http://www.xsitg.com.cn/ent.png" style="width: 400px;"/>
                  <!-- <el-upload

                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload> -->
                </div>

              </div>
            </el-form-item>
          </el-col>
          <!-- radio选择 -->
          <el-col v-else-if="item.type == 'radio'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
              <el-radio-group
                class="my-radio"
                v-model="formModel[item.model]">
                <el-radio
                  @change="click(item, i.label)"
                  :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                  v-for="i in item.props.radios"
                  :key="i.value"
                  :label="i.label">
                  {{ i.value }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!-- 选择块 -->
          <el-col v-else-if="item.type == 'checkbox'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`">
              <el-radio-group
                size="small"
                class="suit"
                @change="radioUp"
                text-color="#fff"
                fill='#51aa38'
                v-model="formModel[item.model]">
                <el-radio-button
                  :disabled="(item.edit==true||item.edit==false)?!item.edit:!plus.edit"
                  v-for="i in item.props.checkboxs"
                  :label="i.label"
                  :key="i.label"

                >{{ i.label }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <!--  时间 -->
          <el-col v-else-if="item.type === 'time'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`" class="suitTime">
              <div class="time">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="item.startPlaceholder"
                  v-model="formModel[item.model]"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <!-- 地理位置选择 -->
          <el-col v-else-if="item.type === 'place'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`" class="suitTime">
              <el-cascader :options="addressData" :disabled="false" @change="handleAddress"
                           style="width: 95%" v-model="addressSelections" placeholder="请选择省市区"></el-cascader>
            </el-form-item>
          </el-col>


          <!-- 时间区间 -->
          <el-col v-else-if="item.type === 'timeSection'" :span="item.span">
            <el-form-item :label="item.name" :label-width="`${item.width?item.width:10}px`" class="suitTime">
              <div class="time">
                <el-date-picker
                  type="date"
                  value-format="yyyy-MM-dd"
                  :placeholder="item.startPlaceholder"
                  v-model="formModel[item.start]"
                ></el-date-picker>
                <el-date-picker
                  type="date"
                  class="time-in"
                  value-format="yyyy-MM-dd"
                  :placeholder="item.endPlaceholder"
                  v-model="formModel[item.end]"
                ></el-date-picker>
              </div>
            </el-form-item>
          </el-col>

          <!-- 表格 -->
          <el-col v-else-if="item.type == 'table'" :span="item.span">
            <el-form-item :label="item.name">
              <el-table
                stripe border
                :highlight-current-row="true"
                :data="formModel[item.model]">
                <el-table-column
                  v-for="in_item in plus.tableLabel"
                  :key="in_item.prop"
                  :label="in_item.label"
                  :width="in_item.width ? in_item.width : ''"
                >
                  <template slot-scope="scope">

                    <span v-if="in_item.edit==false">{{ scope.row[in_item.prop] }}</span>
                    <!-- 自定义选择框 -->
                    <el-form v-else-if="in_item.type && in_item.type=='select' && in_item.options" :model="scope.row">
                      <el-form-item size="mini">
                        <el-select
                          v-model="scope.row[in_item.prop]"
                          :placeholder="in_item.options[0].value"
                          @change="selectChangeTableRow(item.model, scope.row[in_item.prop], scope.$index)">
                          <el-option
                            v-for="i in in_item.options"
                            :key="i.value"
                            :label="i.label"
                            :value="i.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                    <!-- 外定义选择框 -->
                    <el-form v-else-if="in_item.type && in_item.type=='select'" :model="scope.row">
                      <el-form-item size="mini">

                        <el-select
                          v-if="plus.edit && plus.optionList[scope.$index] && plus.optionList[scope.$index].length > 1"
                          v-model="scope.row[in_item.prop]"
                          :placeholder="plus.optionList[scope.$index][0].value"
                          @change="selectChangeTableRow(item.model, scope.row[in_item.prop], scope.$index)">
                          <el-option
                            v-for="i in plus.optionList[scope.$index]"
                            :key="i.value"
                            :label="i.label"
                            :value="i.value">
                          </el-option>
                        </el-select>
                        <span v-else>{{ scope.row[in_item.prop] }}</span>
                      </el-form-item>
                    </el-form>

                    <!-- 输入框 -->
                    <el-form v-else :model="scope.row">
                      <el-form-item size="mini">
                        <el-input v-if="plus.edit" v-model="scope.row[in_item.prop]"></el-input>
                        <span v-else>{{ scope.row[in_item.prop] }}</span>
                      </el-form-item>
                    </el-form>
                  </template>
                </el-table-column>
              </el-table>
            </el-form-item>
          </el-col>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'NormalFormPlus',
  props: {
    formModel: Object, // form对象存值的地方
    config: Array,
    plus: Object
  },
  data() {
    return {
      focusIntelModel: '',
      intelFormRecommend: {},
      intelFormResult: [{"value": "二氧化碳", "info": "企业规划书p12"},
        {"value": "甲烷", "info": "企业规划书篇13"},],
      txt: `智能制造与自动化：智能制造和自动化技术在钢铁行业中得到广泛应用。通过引进先进的生产设备和信息技术，钢铁企业可以提高生产效率、降低成本，并实现可持续发展目标。
环保要求：环境保护已经成为钢铁行业发展的重要驱动因素。各国政府加大对环境法规的执法力度，钢铁企业需要加大环保投入，改善工艺和生产方式，减少环境污染。
<p>电力设施</p>：钢铁生产过程中对大量电力供应需求巨大。随着可再生能源的快速发展和成本的降低，电力设施正逐渐成为钢铁企业的重要考虑因素。钢铁企业应密切关注电力市场的变化，探索可再生能源在生产过程中的应用。
智能物流与供应链管理：智能物流和供应链管理将成为钢铁企业提高竞争力的重要手段。通过应用物联网、大数据分析和人工智能等技术，钢铁企业可以实现供应链的优化和效率提升。`
    }
  },
  methods: {
    highlightText(text) {
      // 这里使用正则表达式匹配并替换需要高亮的文字
      return text.replace(/电力设施/g, '<pre class="highlight" style="background-color: yellow;">电力设施</pre>');
    },
    focusIntel(model) {
      this.focusIntelModel = model
      this.getIntelFormRecommend()
    },
    querySearch(queryString, cb) {
      var intelFormResult = []
      for (var i = 0; i < this.intelFormRecommend.length; i++) {
        if (this.intelFormRecommend[i].prop == this.focusIntelModel) {
          intelFormResult.push({'value': this.intelFormRecommend[i].value, 'info': this.intelFormRecommend[i].info})
        }
      }
      console.log('init :')
      console.log(intelFormResult)
      var results = queryString ? intelFormResult.filter(this.createFilter(queryString)) : intelFormResult;
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 获取智能表单数值推荐
    getIntelFormRecommend() {
      var formProList = []
      for (var i = 0; i < this.config.length; i++) {
        for (var j = 0; j < this.config[i].items.length; j++) {
          formProList.push({
            prop: this.config[i].items[j].model,
            value: this.formModel[this.config[i].items[j].model],
            mean: this.config[i].items[j].name
          })
        }
      }
      this.intelFormRecommend = [
        // {prop:'name', value:'用电排放', info:'2021市场调研报告.docx p12', mean:'排放源'},
        // {prop:'name', value:'铁路运输排放', info:'2021市场调研报告.docx p11', mean:'排放源'},
        // {prop:'name', value:'煤炭排放', info:'2022市场调研报告.docx p21', mean:'排放源'},

        {prop: 'facility', value: '电力设施', info: '研发报告-市场趋势分析.docx p12', mean: '排放设施'},
        // {prop:'facility', value:'铁路运输', info:'研发报告-市场趋势分析.docx p12', mean:'排放设施'},
        // {prop:'facility', value:'煤炭生产', info:'研发报告-市场趋势分析1.docx p13', mean:'排放设施'},

        {
          prop: 'dataRecordMethod',
          value: '消耗记录',
          info: '品牌推广方案-数字营销策略.docx p17',
          mean: '活动数据记录方式'
        },

        {
          prop: 'dataRetentionDept',
          value: '行政部',
          info: '员工培训手册-销售技巧提升.docx p4',
          mean: '活动数据保存部门'
        },
      ]
      return;
      // 获取知识库问答
      this.$API.enterprise.getLocalDocChat({
        knowledgeBaseId: "test",
        question: "填充 x = " + JSON.stringify(formProList) + '， 如果找到对应的json实体则只返回对应的json结构，否则返回-1',
        history: []
      }).then(response => {
        var answer = response.data.response;
        // 判断是否有有效的答案
        if (answer.search('x') != -1) {
          var temAnswer = JSON.parse(answer);
          if (temAnswer) {
            this.intelFormRecommend = temAnswer['x']
            console.log('get answer: ')
            console.log(this.intelFormRecommend);
          }
        } else {
          var temAnswer = JSON.parse(answer);
          if (temAnswer) {
            this.intelFormRecommend = temAnswer
            console.log('get answer: ')
            console.log(this.intelFormRecommend);
          }
        }
      })

    },
    // 监听表格选择事件，改变行对应的值
    selectChangeTableRow(prop, value, index) {
      for (var i = 0; i < this.plus.optionList[index].length; i++) {
        if (value == this.plus.optionList[index][i].value) {
          // 深度克隆来修改原先表单的值
          var li = JSON.parse(JSON.stringify(this.formModel[prop]))
          li[index] = this.plus.optionList[index][i].replace
          this.$set(this.formModel, prop, li)
        }
      }
    },
    click(item, label) {
      this.config.filter(function (cf, index) {
        cf.items.filter(function (i, index) {
          if (i.id == item.connect) {
            // console.log('get' + i.edit)
            i.edit = item.connectCodeTable[label]
          }
        })
      })
    },
    radioUp(label) {
      // console.log(label)
      this.$emit('radioUp', label)
    },
    handlePictureCardPreview() {
    },
    handleRemove() {
    }
  },
  watch: {
    // 深度监听表单数据变化，随时传递数据
    config: {
      handler(newValue, oldValue) {
        console.log('change')
        this.$forceUpdate();
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.suit-upload {
  display: flex;

  .my-upload {
    margin: 20px;
  }
}

.container {
  margin: 0;
  padding: 0;
}

el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

// 隐藏侧边的白条
/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 0px;
}

.el-form-item {
  word-break: keep-all;
  margin-left: 20px;
}

.time {
  display: flex;
  margin-left: 20px;
}

.time-in {
  margin-left: 20px;
}

.suit {
  margin-left: 30px;
}

.suit-text {
  margin-right: -30px;
  margin-left: 30px;
}

.suitTime {
  /* margin-left: 10px; */
}

.my-radio {
  /* display: flex; */
  margin-left: 10px;
}

.my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .value {
      text-overflow: ellipsis;
      overflow: hidden;
    }

    .info {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .info {
      color: #ddd;
    }
  }
}

.my-icon {
  height: 20px;
  width: 30px;
  margin-top: 5px;
}

.my-icon2 {
  margin-left: 40px;
}

.highlight {
  background-color: yellow;
  color: #56b97f;
}
</style>
